<template>
	<view>
		<uni-popup ref="popup" @maskClick="close" type="bottom" border-radius="32rpx 32rpx 0 0">
			<view class="reportPopup">
				<view class="popupMian">
					<view class="popupTitle">
						<view></view>
						<text style="color: #262626;font-size: 32rpx;font-weight: bold;">好友列表</text>
						<image @tap="close" style="width: 21rpx;height: 21rpx;" src="../../static/img/close.png">
						</image>
					</view>
				</view>
				<view class="inputWraps">
					<view class="inputWrap">
						<image @tap="getList" class="inputImg" src="../../static/img/index/61.png"></image>
						<input v-model="userName" placeholder="请输入姓名或手机号搜索"
							placeholder-style="font-size:28rpx;color:#595959;" confirm-type="search"
							@confirm="getList" />
					</view>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="scroll" class="friend-list-container">
					<view v-for="(item, index) in friendList" :key="index" class="friend-item-wrapper"
						:class="{ 'friend-item-selected': selectedIndex === index }"
						@click="selectFriend(index,item.userId)">
						<image class="friend-avatar"
							:src="item.avatarId?`${httpUrl}/app/file/viewFile?fileId=${item.avatarId}`:'../../static/img/userImg.png'">
						</image>
						<text class="friend-name">{{ item.userName }}</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { pageUserFriendList } from '@/utils/api/index.ts';
	import { getUserImInfo } from '@/utils/api/userInfo.ts'
	import { TUILogin } from '@tencentcloud/tui-core';
	// #ifdef APP-PLUS || H5
	import { TUIChatKit } from '../../pages/TUIKit';
	TUIChatKit.init();
	// #endif
	const httpUrl = ref(getApp().globalData.baseUrl)
	// 关闭返回
	const close = () => {
		uni.navigateBack({
			success: function () {
				uni.$emit('refreshData', { trendsId: trendsId.value });
			}
		})
	}
	const friendList = ref<any>([])
	const friendPageNo = ref(1)
	const trendsId = ref('')
	const userName = ref('')
	const getList = async () => {
		friendPageNo.value = 1
		const res = await pageUserFriendList({ data: { pageNo: friendPageNo.value, keyword: userName.value } })
		friendList.value = res.data.list
	}
	const scroll = async () => {
		friendPageNo.value++
		const res = await pageUserFriendList({ data: { pageNo: friendPageNo.value } })
		if (res.data.list > 0) {
			friendList.value.push(...res.data.list)
		}
	}
	const selectedIndex = ref<number | null>(null);
	// 选择好友的方法  
	const selectFriend = (index : number, id : string) => {
		selectedIndex.value = index;
		const conversationID = `C2C${id}`;
		if(userId.value){
			uni.navigateTo({ url: `/pages/TUIKit/components/TUIChat/index?conversationID=${conversationID}&userId=${id}&userIds=${userId.value}&areaType=${areaType.value}` });
		}else{
			uni.navigateTo({ url: `/pages/TUIKit/components/TUIChat/index?conversationID=${conversationID}&userId=${id}&trendsId=${trendsId.value}&areaType=${areaType.value}` });
		}
	}
	const getUserInfo = async () => {
		const { userID } = TUILogin.getContext();
		const userRes = await getUserImInfo()
		if (userID && userID == userRes.data.imUserId) {
			return
		}
		if (userID && userID != userRes.data.imUserId) {
			TUILogin.logout();
		}
		await TUILogin.login({
			SDKAppID: 1600043419,
			userID: userRes.data.imUserId,
			userSig: userRes.data.imUserSign,
			useUploadPlugin: true,
			framework: `vue3`
		})
	}
	const popup = ref<InstanceType<typeof Popup> | null>(null);
	const areaType=ref('')
	const userId=ref('')
	onLoad(async (option) => {
		trendsId.value = option.id
		areaType.value=option.areaType
		userId.value=option.userId
		getUserInfo()
		await getList()
		popup.value.open('bottom')
	})
</script>

<style>
	page {
		background: transparent;
	}

	.bg-color {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popups {
		width: 100%;
		height: 488rpx;
		background: #F4F6FA;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.reportPopup {
		width: 100%;
		height: 1030rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.popupMian {
		width: 94%;
		margin-left: 3%;
		position: relative;
	}

	.popupTitle {
		width: 100%;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.reportTitle {
		width: 100%;
		height: 54rpx;
		font-size: 36rpx;
		color: #262626;
		margin-top: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.inputWraps {
		width: 100%;
		height: 106rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.inputWrap {
		width: 90%;
		height: 74rpx;
		background: rgba(245, 245, 245, 0.9);
		border-radius: 37rpx;
		display: flex;
		align-items: center;
	}

	.inputImg {
		width: 32rpx;
		height: 32rpx;
		margin-left: 32rpx;
		margin-right: 10rpx;
	}

	.friend-list-container {
		height: 60vh;
		padding: 20px;
		margin-bottom: 10rpx;
	}

	.friend-item-wrapper {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.friend-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 15px;
	}

	.friend-name {
		font-size: 16px;
		color: #333;
		font-weight: bold;
	}

	.friend-item-selected {
		background-color: #e0f7fa;
		border-color: #2196f3;
	}
</style>